<template>
  <aside
    class="fixed shadow-2xl bg-white rounded-lg sm:w-14 sm:h-4/5 sm:left-5 sm:top-[10%] max-sm:w-4/5 max-sm:h-14 max-sm:left-[10%] max-sm:top-auto max-sm:bottom-5"
  >
    <ul
      class="m-0 p-0 sm:py-5 max-sm:px-5 size-full list-none flex sm:flex-col max-sm:flex-row justify-around items-center"
    >
      <li
        v-for="item in MenuData"
        :key="item.id"
        class="cursor-pointer"
        ref="menuItemRef"
      >
        <SvgIcon
          :name="item.coverImage"
          :size="30"
          @click="handleMenuItem(item)"
        />
      </li>
    </ul>
  </aside>

  <Transition name="scale">
    <section
      v-if="activeMenuItem"
      class="max-w-[calc(100vw_-_120px)] max-sm:h-4/5 sm:h-4/5 absolute left-24 top-1/2 -translate-y-1/2 max-sm:w-4/5 max-sm:left-[10%]"
      :style="origin"
    >
      <Gallery :data="currentMenuData" />
    </section>
  </Transition>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import Gallery from "@/components/Gallery/index.vue";
import { MenuData, IMenuItem } from "@/utils/mock";

const menuItemRef = ref<HTMLLIElement[]>([]);

let activeMenuItem = ref<string>("");

const origin = computed(() => {
  if (!activeMenuItem.value || menuItemRef.value.length === 0) return "";

  const index = MenuData.findIndex((item) => item.id === activeMenuItem.value);
  const currentMenu = menuItemRef.value[index];

  if (window.innerWidth < 640) {
    const { left, width } = currentMenu.getBoundingClientRect();
    const realX = left + width / 2 - (window.innerHeight / 10) * 1;
    return `transform-origin:${realX}px 100%`;
  }
  const { top, height } = currentMenu.getBoundingClientRect();
  const realY = top + height / 2 - (window.innerHeight / 10) * 1;
  return `transform-origin:0px ${realY}px`;
});
const currentMenuData = ref<IMenuItem[]>([]);
const handleMenuItem = (item: IMenuItem) => {
  activeMenuItem.value = item.id;
  item.menuItem && (currentMenuData.value = item.menuItem);
};
</script>

<style lang="scss" scoped>
.scale-enter-from {
  transform: translateY(-50%) scale(0);
  opacity: 0.5;
}
.scale-enter-active,
.scale-leave-active {
  transition: all 0.6s;
}
.scale-enter-to {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.scale-leave-from {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.scale-leave-to {
  transform: translateY(-50%) scale(0);
  opacity: 0.5;
}
</style>
